<template>
	<view class="default_box">
		<view class="top_outSide_box">
			<view class="top_box_level_2">
				<view class="top_Icon_And_Text" v-for="(item, index) in topFeatures" :key="index">
					<image :src="item.imageUrl" mode=""></image>
					<text>{{ item.iconText }}</text>
				</view>
			</view>
			<view class="select_bar">
				<view v-for="(item, index) in navItems" :key="index" class="select_bar_item" @click="select(index)">
					<view :class="{selected_item: selectBar === index}">{{ item.bigText }}</view>
					<view :class="{selected_item: selectBar === index}">{{ item.description }}</view>
				</view>
			</view>
		</view>
		<swiper :autoplay="false" :interval="3000" :duration="1000" :current="this.selectBar"
			@change="change_Select_Bar" style="height: 400vh">

			<!-- 品牌专区页面 -->
			<swiper-item>
				<view class="tab_One">
					<!-- 品牌logo展示 -->
					<view class="brand_header">
						<image src="/static/pet-test.png" mode="aspectFit" class="brand_logo"></image>
						<text class="brand_slogan">专业宠物健康管理</text>
					</view>

					<!-- 品牌系列产品分类 -->
					<view class="middle_outSide_box">
						<view class="section_title">品牌系列</view>
						<view class="inner_level_1">
							<view class="circle_box" v-for="(item, index) in brandSeries" :key="index">
								<image class="circle_image" :src="item.imageUrl" mode="" />
								<view class="image_background_color" :style="{backgroundColor: item.bgColor}"> </view>
								<text class="image_bottom_text">{{item.name}}</text>
							</view>
						</view>

						<!-- 品牌产品分类 -->
						<view class="section_title">全线产品</view>
						<view class="inner_level_2">
							<view class="eight_box" v-for="(item, index) in productCategories" :key="index">
								<image :src="item.imageUrl" mode=""></image>
								<text>{{item.name}}</text>
							</view>
						</view>
					</view>

					<!-- 品牌故事与推荐 -->
					<view class="bottom_Box">
						<view class="section_title">品牌故事</view>
						<view class="brand_story">
							<image src="/static/pet-test.png" mode="aspectFit"></image>
							<view class="brand_story_text">
								<text>我们致力于为您的爱宠提供专业健康管理方案</text>
							</view>
						</view>

						<!-- 明星产品展示 -->
						<view class="section_title">明星产品</view>
						<view class="waterfall">
							<theWaterFallVue :productList="featuredProducts"></theWaterFallVue>
						</view>
					</view>
				</view>
			</swiper-item>

			<!-- 促销活动页面 -->
			<swiper-item>
				<view class="tab_Two">
					<!-- 促销banner -->
					<view class="promo_banner">
						<swiper :autoplay="true" :interval="3000" :duration="1000" :circular="true"
							class="banner_swiper">
							<swiper-item v-for="(item, index) in promotionBanners" :key="index">
								<image :src="item.imageUrl" mode="widthFix" class="banner_image"></image>
							</swiper-item>
						</swiper>
					</view>

					<!-- 限时特惠 -->
					<view class="middle_outSide_box">
						<view class="section_title">限时特惠</view>
						<view class="time_limited">
							<view class="countdown">
								<text>距结束还剩：</text>
								<text class="time_box">{{countDown.hours}}</text>
								<text>:</text>
								<text class="time_box">{{countDown.minutes}}</text>
								<text>:</text>
								<text class="time_box">{{countDown.seconds}}</text>
							</view>
							<view class="sale_products">
								<view class="sale_item" v-for="(item, index) in flashSaleProducts" :key="index">
									<image :src="item.imageUrl" mode="aspectFit"></image>
									<view class="sale_info">
										<text class="product_name">{{item.name}}</text>
										<view class="price_info">
											<text class="current_price">¥{{item.currentPrice}}</text>
											<text class="original_price">¥{{item.originalPrice}}</text>
										</view>
										<view class="buy_btn">立即抢购</view>
									</view>
								</view>
							</view>
						</view>
					</view>

					<!-- 优惠券中心 -->
					<view class="middle_outSide_box">
						<view class="section_title">优惠券中心</view>
						<view class="coupon_list">
							<view class="coupon_item" v-for="(item, index) in coupons" :key="index">
								<view class="coupon_left" :style="{backgroundColor: item.bgColor}">
									<text class="coupon_amount">¥{{item.amount}}</text>
									<text class="coupon_condition">满{{item.minSpend}}元可用</text>
								</view>
								<view class="coupon_right">
									<text class="coupon_type">{{item.type}}</text>
									<text class="coupon_date">{{item.validDate}}</text>
									<view class="get_coupon_btn">立即领取</view>
								</view>
							</view>
						</view>
					</view>

					<!-- 活动专区 -->
					<view class="middle_outSide_box">
						<view class="section_title">活动专区</view>
						<view class="promotion_grid">
							<view class="promo_item" v-for="(item, index) in promotionActivities" :key="index">
								<image :src="item.imageUrl" mode="aspectFit"></image>
								<text>{{item.title}}</text>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>

			<!-- 新品推荐页面 -->
			<swiper-item>
				<view class="tab_Three">
					<!-- 新品标语 -->
					<view class="new_slogan">
						<text>探索全新宠物护理体验</text>
						<view class="slogan_decoration"></view>
					</view>

					<!-- 新品精选 -->
					<view class="middle_outSide_box">
						<view class="section_title">新品精选</view>
						<view class="inner_level_3">
							<view class="new_product_item" v-for="(item, index) in newProducts" :key="index">
								<image :src="item.imageUrl" mode="aspectFit"></image>
								<view class="new_tag">NEW</view>
								<text class="product_name">{{item.name}}</text>
								<text class="product_price">¥{{item.price}}</text>
							</view>
						</view>
					</view>

					<!-- 新品分类选项卡 -->
					<view class="middle_outSide_box" style="margin-top: 20rpx;padding-top: 0;">
						<view class="inner_level_3">
							<view style="width: 100%;display: flex;justify-content: center;">
								<uv-tabs :scrollable="false" :list="newProductTabs" @click="getTheIndex"></uv-tabs>
							</view>
							<swiper style="width: 100%" disable-touch='true' :current="this.threeTableSelected"
								class="category_swiper">
								<swiper-item
									v-for="(categoryList, tabIndex) in [dogNewProducts, catNewProducts, otherNewProducts]"
									:key="tabIndex">
									<view class="new_products_grid">
										<view class="new_product_card" v-for="(item, index) in categoryList"
											:key="index">
											<image :src="item.imageUrl" mode="aspectFit"></image>
											<view class="product_info">
												<text class="product_name">{{item.name}}</text>
												<text class="product_desc">{{item.description}}</text>
												<view class="product_bottom">
													<text class="product_price">¥{{item.price}}</text>
													<view class="add_cart_btn">+</view>
												</view>
											</view>
										</view>
									</view>
								</swiper-item>
							</swiper>
						</view>
					</view>

					<!-- 新品推荐横幅 -->
					<view class="big_Image" style="margin-top: 20rpx;">
						<image src="/static/pet-test.png" mode="aspectFit"></image>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import theWaterFallVue from '@/components/theWaterFall.vue'
	export default {
		data() {
			return {
				threeTableSelected: 0,
				selectBar: 0, // 默认选中第一项

				// 顶部功能特性
				topFeatures: [{
						imageUrl: '/static/pet-test.png',
						iconText: '专业品质保障',
					},
					{
						imageUrl: '/static/pet-test.png',
						iconText: '正品直供',
					},
					{
						imageUrl: '/static/pet-test.png',
						iconText: '专业宠物顾问',
					},
				],

				// 导航栏项目
				navItems: [{
						bigText: '品牌专区',
						description: '全线产品展示',
					},
					{
						bigText: '促销活动',
						description: '限时特惠抢购',
					},
					{
						bigText: '新品推荐',
						description: '新品尝鲜体验',
					},
				],

				// 品牌系列
				brandSeries: [{
						imageUrl: '/static/pet-test.png',
						name: '幼犬系列',
						bgColor: '#FFD6E7'
					},
					{
						imageUrl: '/static/pet-test.png',
						name: '成犬系列',
						bgColor: '#D6E5FF'
					},
					{
						imageUrl: '/static/pet-test.png',
						name: '猫咪系列',
						bgColor: '#FFEAD6'
					}
				],

				// 产品分类
				productCategories: [{
						imageUrl: '/static/pet-test.png',
						name: '营养主粮'
					},
					{
						imageUrl: '/static/pet-test.png',
						name: '日常护理'
					},
					{
						imageUrl: '/static/pet-test.png',
						name: '健康零食'
					},
					{
						imageUrl: '/static/pet-test.png',
						name: '营养保健'
					},
					{
						imageUrl: '/static/pet-test.png',
						name: '美毛产品'
					},
					{
						imageUrl: '/static/pet-test.png',
						name: '肠胃调理'
					},
					{
						imageUrl: '/static/pet-test.png',
						name: '口腔护理'
					},
					{
						imageUrl: '/static/pet-test.png',
						name: '医疗用品'
					}
				],

				// 明星产品
				featuredProducts: [{
						id: 1,
						imageUrl: '/static/pet-test.png',
						name: '营养配方狗粮',
						price: 199,
						sales: 2543
					},
					{
						id: 2,
						imageUrl: '/static/pet-test.png',
						name: '猫咪化毛膏',
						price: 89,
						sales: 1299
					},
					{
						id: 3,
						imageUrl: '/static/pet-test.png',
						name: '宠物牙刷套装',
						price: 59,
						sales: 3678
					},
					{
						id: 4,
						imageUrl: '/static/pet-test.png',
						name: '幼犬奶粉',
						price: 168,
						sales: 1890
					}
				],

				// 促销活动banner
				promotionBanners: [{
						imageUrl: '/static/pet-test.png',
						link: '/pages/promotion/spring'
					},
					{
						imageUrl: '/static/pet-test.png',
						link: '/pages/promotion/discount'
					},
					{
						imageUrl: '/static/pet-test.png',
						link: '/pages/promotion/newyear'
					}
				],

				// 倒计时
				countDown: {
					hours: '23',
					minutes: '59',
					seconds: '59'
				},

				// 限时抢购商品
				flashSaleProducts: [{
						imageUrl: '/static/pet-test.png',
						name: '天然狗粮10kg',
						currentPrice: 199,
						originalPrice: 299
					},
					{
						imageUrl: '/static/pet-test.png',
						name: '猫咪磨牙零食',
						currentPrice: 29.9,
						originalPrice: 59.9
					},
					{
						imageUrl: '/static/pet-test.png',
						name: '宠物营养膏',
						currentPrice: 69,
						originalPrice: 99
					}
				],

				// 优惠券
				coupons: [{
						amount: 10,
						minSpend: 100,
						type: '全场通用券',
						validDate: '2025-04-15到期',
						bgColor: '#FF6B6B'
					},
					{
						amount: 20,
						minSpend: 200,
						type: '狗粮专用券',
						validDate: '2025-04-30到期',
						bgColor: '#4ECDC4'
					},
					{
						amount: 50,
						minSpend: 300,
						type: '品牌周专享',
						validDate: '2025-04-10到期',
						bgColor: '#FFD166'
					}
				],

				// 活动专区
				promotionActivities: [{
						imageUrl: '/static/pet-test.png',
						title: '春季大促',
						link: '/pages/promotion/spring'
					},
					{
						imageUrl: '/static/pet-test.png',
						title: '新品首发',
						link: '/pages/promotion/new'
					},
					{
						imageUrl: '/static/pet-test.png',
						title: '清仓特惠',
						link: '/pages/promotion/clearance'
					},
					{
						imageUrl: '/static/pet-test.png',
						title: '会员专享',
						link: '/pages/promotion/member'
					}
				],

				// 新品推荐
				newProducts: [{
						imageUrl: '/static/pet-test.png',
						name: '深海鱼油胶囊',
						price: 129
					},
					{
						imageUrl: '/static/pet-test.png',
						name: '宠物按摩梳',
						price: 89
					},
					{
						imageUrl: '/static/pet-test.png',
						name: '消毒除臭喷雾',
						price: 59
					},
					{
						imageUrl: '/static/pet-test.png',
						name: '有机猫草种植',
						price: 39
					},
					{
						imageUrl: '/static/pet-test.png',
						name: '洁牙棒礼盒',
						price: 78
					}
				],

				// 新品分类标签
				newProductTabs: [{
					name: '狗狗新品',
				}, {
					name: '猫咪新品',
				}, {
					name: '其他宠物'
				}],

				// 狗狗新品
				dogNewProducts: [{
						imageUrl: '/static/pet-test.png',
						name: '犬用益生菌',
						description: '调理肠道健康',
						price: 128
					},
					{
						imageUrl: '/static/pet-test.png',
						name: '防过敏沐浴露',
						description: '无刺激配方',
						price: 89
					},
					{
						imageUrl: '/static/pet-test.png',
						name: '低敏鸭肉犬粮',
						description: '敏感肠胃专用',
						price: 199
					},
					{
						imageUrl: '/static/pet-test.png',
						name: '关节护理咀嚼片',
						description: '老年犬专用',
						price: 168
					}
				],

				// 猫咪新品
				catNewProducts: [{
						imageUrl: '/static/pet-test.png',
						name: '猫咪化毛膏',
						description: '有效预防毛球',
						price: 86
					},
					{
						imageUrl: '/static/pet-test.png',
						name: '三文鱼猫粮',
						description: '毛发亮丽配方',
						price: 189
					},
					{
						imageUrl: '/static/pet-test.png',
						name: '猫咪牙结石清除器',
						description: '口腔护理专用',
						price: 59
					},
					{
						imageUrl: '/static/pet-test.png',
						name: '猫砂除臭剂',
						description: '持久除臭',
						price: 45
					}
				],

				// 其他宠物新品
				otherNewProducts: [{
						imageUrl: '/static/pet-test.png',
						name: '小宠维生素滴剂',
						description: '兔子/龙猫适用',
						price: 68
					},
					{
						imageUrl: '/static/pet-test.png',
						name: '爬虫专用垫材',
						description: '安全吸湿',
						price: 49
					},
					{
						imageUrl: '/static/pet-test.png',
						name: '仓鼠营养棒',
						description: '混合坚果',
						price: 29
					},
					{
						imageUrl: '/static/pet-test.png',
						name: '鸟类复合维生素',
						description: '羽毛健康',
						price: 56
					}
				]
			}
		},
		components: {
			theWaterFallVue
		},
		methods: {
			select(e) {
				if (this.selectBar === e) {
					return
				} else {
					this.selectBar = e
				}
			},
			change_Select_Bar(ee) {
				if (this.selectBar === ee.detail.current) {
					return
				} else {
					this.selectBar = ee.detail.current
				}
			},
			getTheIndex(e) {
				this.threeTableSelected = e.index
			},
			// 可以添加倒计时函数
			startCountDown() {
				// 实际应用中可以从服务器获取结束时间
				const timer = setInterval(() => {
					let hours = parseInt(this.countDown.hours)
					let minutes = parseInt(this.countDown.minutes)
					let seconds = parseInt(this.countDown.seconds)

					seconds--
					if (seconds < 0) {
						seconds = 59
						minutes--
						if (minutes < 0) {
							minutes = 59
							hours--
							if (hours < 0) {
								clearInterval(timer)
								// 倒计时结束处理
								return
							}
						}
					}

					this.countDown.hours = hours < 10 ? '0' + hours : hours.toString()
					this.countDown.minutes = minutes < 10 ? '0' + minutes : minutes.toString()
					this.countDown.seconds = seconds < 10 ? '0' + seconds : seconds.toString()
				}, 1000)
			}
		},
		onMounted() {
			this.startCountDown()
		}
	}
</script>

<style scoped>
	/* 已有样式部分保留 */
	.default_box {
		background-color: #f5f5f5;
		padding-bottom: 30rpx;
		min-height: 400vh;
	}

	/* 顶部区域样式 */
	.top_outSide_box {
		padding: 60rpx 30rpx;
		background: linear-gradient(to right, #F9CB43, #FFDA7A);
		border-radius: 0 0 30rpx 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	.top_box_level_2 {
		display: flex;
		margin-top: 20rpx;
	}

	.top_Icon_And_Text {
		height: 66rpx;
		width: 32%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.top_Icon_And_Text image {
		height: 36rpx;
		width: 36rpx;
	}

	.top_Icon_And_Text text {
		font-size: 24rpx;
		margin-left: 10rpx;
	}

	/* 选择栏样式 */
	.select_bar {
		height: 100rpx;
		width: 100%;
		gap: 3%;
		display: flex;
		margin-top: 20rpx;
	}

	.select_bar_item {
		height: 100%;
		width: 33%;
		justify-content: center;
		align-items: center;
		display: flex;
		flex-direction: column;
	}

	.select_bar_item view:nth-child(1) {
		font-size: 32rpx;
		font-weight: 500;
	}

	.select_bar_item view:nth-child(2) {
		font-size: 24rpx;
		color: #7a7a7a;
	}

	.selected_item {
		font-weight: bold;
		color: #FF6B6B;
	}

	/* 通用板块样式 */
	.middle_outSide_box {
		width: 92%;
		margin: 0 auto;
		background-color: #ffffff;
		border-radius: 24rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	.section_title {
		font-size: 32rpx;
		font-weight: bold;
		padding: 20rpx 10rpx;
		border-bottom: 1px solid #f0f0f0;
		margin-bottom: 20rpx;
	}

	/* 品牌专区样式 */
	.brand_header {
		width: 92%;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 30rpx 0;
	}

	.brand_logo {
		width: 200rpx;
		height: 200rpx;
		border-radius: 20rpx;
	}

	.brand_slogan {
		font-size: 36rpx;
		font-weight: bold;
		margin-top: 20rpx;
		color: #333;
	}

	.inner_level_1 {
		display: flex;
		justify-content: space-around;
		padding: 20rpx 0;
	}

	.circle_box {
		width: 30%;
		height: 210rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		position: relative;
		gap: 20rpx;
	}

	.circle_image {
		height: 120rpx;
		width: 120rpx;
		z-index: 10;
		margin-top: 20rpx;
		border-radius: 60rpx;
	}

	.image_background_color {
		width: 80%;
		height: 100rpx;
		position: absolute;
		top: 50rpx;
		border-radius: 100rpx;
		opacity: 0.6;
	}

	.image_bottom_text {
		font-size: 28rpx;
		font-weight: bold;
	}

	.inner_level_2 {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 10rpx;
	}

	.eight_box {
		background-color: #f8f8f8;
		width: 23%;
		height: 180rpx;
		margin-bottom: 20rpx;
		border-radius: 16rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.eight_box image {
		height: 80rpx;
		width: 80rpx;
		margin-bottom: 10rpx;
	}

	.eight_box text {
		font-size: 24rpx;
	}

	.brand_story {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx;
	}

	.brand_story image {
		width: 100%;
		height: 300rpx;
		border-radius: 16rpx;
	}

	.brand_story_text {
		padding: 20rpx;
		text-align: center;
		font-size: 28rpx;
		color: #666;
	}

	/* 促销活动样式 */
	.promo_banner {
		width: 92%;
		margin: 20rpx auto;
		border-radius: 16rpx;
		overflow: hidden;
		height: 300rpx;
	}

	.banner_swiper {
		width: 100%;
		height: 100%;
	}

	.banner_image {
		width: 100%;
		border-radius: 16rpx;
	}

	.time_limited {
		padding: 20rpx 0;
	}

	.countdown {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.time_box {
		background-color: #333;
		color: white;
		padding: 10rpx;
		margin: 0 10rpx;
		border-radius: 6rpx;
		min-width: 60rpx;
		text-align: center;
	}

	.sale_products {
		display: flex;
		flex-direction: column;
	}

	.sale_item {
		display: flex;
		padding: 20rpx;
		border-bottom: 1px solid #f0f0f0;
	}

	.sale_item:last-child {
		border-bottom: none;
	}

	.sale_item image {
		width: 180rpx;
		height: 180rpx;
		border-radius: 16rpx;
		margin-right: 20rpx;
	}

	.sale_info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.product_name {
		font-size: 28rpx;
		font-weight: bold;
	}

	.price_info {
		margin: 10rpx 0;
	}

	.current_price {
		font-size: 36rpx;
		color: #FF6B6B;
		font-weight: bold;
		margin-right: 10rpx;
	}

	.original_price {
		font-size: 24rpx;
		color: #999;
		text-decoration: line-through;
	}

	.buy_btn {
		width: 160rpx;
		text-align: center;
		background-color: #FF6B6B;
		color: white;
		padding: 10rpx 20rpx;
		border-radius: 30rpx;
		font-size: 24rpx;
	}

	.coupon_list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.coupon_item {
		display: flex;
		height: 180rpx;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.coupon_left {
		width: 35%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: white;
	}

	.coupon_amount {
		font-size: 48rpx;
		font-weight: bold;
	}

	.coupon_condition {
		font-size: 24rpx;
		margin-top: 10rpx;
	}

	.coupon_right {
		flex: 1;
		background-color: #fff;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: relative;
	}

	.coupon_right::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		width: 20rpx;
		background: radial-gradient(circle at left, transparent 10rpx, white 10rpx);
		background-size: 20rpx 40rpx;
		background-repeat: repeat-y;
	}

	.coupon_type {
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.coupon_date {
		font-size: 22rpx;
		color: #999;
		margin-bottom: 20rpx;
	}

	.get_coupon_btn {
		width: 160rpx;
		text-align: center;
		background-color: #FF6B6B;
		color: white;
		padding: 8rpx 16rpx;
		border-radius: 30rpx;
		font-size: 24rpx;
		align-self: flex-end;
	}

	.promotion_grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 10rpx;
	}

	.promo_item {
		width: 48%;
		height: 200rpx;
		margin-bottom: 20rpx;
		border-radius: 16rpx;
		overflow: hidden;
		position: relative;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.promo_item image {
		width: 100%;
		height: 100%;
	}

	.promo_item text {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 0.5);
		color: white;
		text-align: center;
		padding: 10rpx 0;
		font-size: 26rpx;
	}

	/* 新品推荐样式 */
	.new_slogan {
		width: 92%;
		margin: 20rpx auto;
		text-align: center;
		position: relative;
	}

	.new_slogan text {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		position: relative;
		z-index: 2;
	}

	.slogan_decoration {
		position: absolute;
		bottom: 6rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 240rpx;
		height: 20rpx;
		background-color: rgba(255, 107, 107, 0.2);
		z-index: 1;
	}

	.inner_level_3 {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 10rpx;
	}

	.new_product_item {
		width: 48%;
		margin-bottom: 20rpx;
		border-radius: 16rpx;
		background-color: #f8f8f8;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
	}

	.new_product_item image {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 20rpx;
	}

	.new_tag {
		position: absolute;
		top: 10rpx;
		right: 10rpx;
		background-color: #FF6B6B;
		color: white;
		padding: 6rpx 16rpx;
		border-radius: 20rpx;
		font-size: 22rpx;
		font-weight: bold;
	}

	.category_swiper {
		height: 800rpx;
		margin-top: 20rpx;
	}

	.new_products_grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 10rpx;
	}

	.new_product_card {
		width: 48%;
		margin-bottom: 20rpx;
		border-radius: 16rpx;
		background-color: #ffffff;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		overflow: hidden;
	}

	.new_product_card image {
		width: 100%;
		height: 240rpx;
	}

	.product_info {
		padding: 20rpx;
	}

	.product_desc {
		font-size: 24rpx;
		color: #999;
		margin: 10rpx 0;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.product_bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 16rpx;
	}

	.add_cart_btn {
		width: 46rpx;
		height: 46rpx;
		background-color: #FF6B6B;
		color: white;
		border-radius: 23rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		font-weight: bold;
	}

	.big_Image {
		width: 92%;
		margin: 0 auto;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.big_Image image {
		width: 100%;
		height: 300rpx;
		border-radius: 16rpx;
	}

	/* 瀑布流组件样式 */
	.waterfall {
		padding: 10rpx;
	}

	/* Tab样式优化 */
	.tab_One,
	.tab_Two,
	.tab_Three {
		padding-bottom: 40rpx;
	}

	/* 底部安全区域适配 */
	.bottom_Box {
		width: 92%;
		margin: 0 auto;
		padding-bottom: env(safe-area-inset-bottom);
	}
</style>